<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <a-input v-model="model.name" placeholder="请输入名称"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="公式位置" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="position">
              <j-dict-select-tag type="list" v-model="model.position" dictCode="formula_position_tsl"
                                 placeholder="请选择公式位置" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row v-if="model.position === '1'">
          <a-col :span="24">
            <a-form-model-item label="公式" :labelCol="textareaLabelCol" :wrapperCol="textareaWrapperCol" prop="gs">
              <a-textarea v-model="model.gs" rows="4" placeholder="请输入公式" ref="textarea" @blur="handleBlur" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-space wrap>
              <a-button type="dashed" @click="addPf('[配方]')">配方</a-button>
              <a-button type="dashed" @click="addGgxh('[规格型号]')">规格型号</a-button>
              <a-button type="dashed" @click="addPPA('[PPA]')">PPA</a-button>
              <a-button type="dashed" @click="addPlzh('[配料总和]')">配料总和</a-button>
              <a-button type="dashed" @click="adQplzh('[前配物料总和]')">前配物料总和</a-button>
              <a-button type="dashed" @click="addFlz('[非离子]')">非离子</a-button>
            </a-space>
            <a-space>
              <a-button type="dashed" @click="fg('(')">(</a-button>
              <a-button type="dashed" @click="fg(')')">)</a-button>
              <a-button type="dashed" @click="fg('+')">+</a-button>
              <a-button type="dashed" @click="fg('-')">-</a-button>
              <a-button type="dashed" @click="fg('*')">×</a-button>
              <a-button type="dashed" @click="fg('/')">÷</a-button>
              <a-button type="dashed" @click="clearGs()">清空</a-button>
            </a-space>
          </a-col>
        </a-row>
        <a-row v-else-if="model.position === '2'">
          <a-col :span="24">
            <a-form-model-item label="公式" :labelCol="textareaLabelCol" :wrapperCol="textareaWrapperCol" prop="gs">
              <a-textarea v-model="model.gs" rows="4" placeholder="请输入公式" ref="textarea" @blur="handleBlur" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-space wrap>
              <a-button type="dashed" @click="addPf('[配方]')">配方</a-button>
              <a-button type="dashed" @click="addGgxh('[规格型号]')">规格型号</a-button>
              <a-button type="dashed" @click="addPPA('[PPA]')">PPA</a-button>
              <a-button type="dashed" @click="addPlzh('[配料总和]')">配料总和</a-button>
              <a-button type="dashed" @click="adQplzh('[前配物料总和]')">前配物料总和</a-button>
              <a-button type="dashed" @click="addFlz('[非离子]')">非离子</a-button>
            </a-space>
            <a-space>
              <a-button type="dashed" @click="fg('(')">(</a-button>
              <a-button type="dashed" @click="fg(')')">)</a-button>
              <a-button type="dashed" @click="fg('+')">+</a-button>
              <a-button type="dashed" @click="fg('-')">-</a-button>
              <a-button type="dashed" @click="fg('*')">×</a-button>
              <a-button type="dashed" @click="fg('/')">÷</a-button>
              <a-button type="dashed" @click="clearGs()">清空</a-button>
            </a-space>
          </a-col>
        </a-row>
        <a-row v-else-if="model.position === '3'">
          <a-col :span="24">
            <a-form-model-item label="公式" :labelCol="textareaLabelCol" :wrapperCol="textareaWrapperCol" prop="gs">
              <a-textarea v-model="model.gs" rows="4" placeholder="请输入公式" ref="textarea" @blur="handleBlur" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-space wrap>
              <a-button type="dashed" @click="addPll('[配料量]')">配料量</a-button>
              <a-button type="dashed" @click="addPb('[配比]')">配比</a-button>
            </a-space>
            <a-space>
              <a-button type="dashed" @click="fg('(')">(</a-button>
              <a-button type="dashed" @click="fg(')')">)</a-button>
              <a-button type="dashed" @click="fg('+')">+</a-button>
              <a-button type="dashed" @click="fg('-')">-</a-button>
              <a-button type="dashed" @click="fg('*')">×</a-button>
              <a-button type="dashed" @click="fg('/')">÷</a-button>
              <a-button type="dashed" @click="clearGs()">清空</a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

import { httpAction, getAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'

export default {
  name: 'EneRecipeFormulaTslForm',
  components: {},
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      model: { position: '1', code: '', gs: '' },
      cursorPosition: 0,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      textareaLabelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      textareaWrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      validatorRules: {
        name: [
          { required: true, message: '请输入名称' }
        ],
        gs: [{ required: true, message: '请输入公式' }]
      },
      url: {
        add: '/craft/eneRecipeFormulaTsl/add',
        edit: '/craft/eneRecipeFormulaTsl/edit',
        queryById: '/craft/eneRecipeFormulaTsl/queryById'
      }
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    }
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  methods: {
    add() {
      this.edit(this.modelDefault)
    },
    edit(record) {
      this.model = Object.assign({}, record)
      this.visible = true
    },
    submitForm() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          httpAction(httpurl, this.model, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
          })
        }

      })
    },
    handleBlur(event) {
      var elem = event.relatedTarget || event.srcElement || event.target || event.currentTarget
      console.log('获得的键', event)
      if (event.keyCode === 8) {//判断按键为backSpace键
        //
        return
      }
      this.cursorPosition = event.srcElement.selectionStart
      console.log(this.cursorPosition)
    },
    fg(content) {
      this.insertText(content)
    },
    addPf() {
      this.insertText('[配方]')
    },
    addGgxh() {
      this.insertText('[规格型号]')
    },
    addPPA() {
      this.insertText('[PPA]')
    },
    addPlzh() {
      this.insertText('[配料总和]')
    },
    adQplzh() {
      this.insertText('[前配物料总和]')
    },
    addFlz() {
      this.insertText('[非离子]')
    },
    addPll(){
      this.insertText('[配料量]')
    },
    addPb(){
      this.insertText('[配比]')
    },
    insertText(text) {
      this.model.gs =
        this.model.gs.substring(0, this.cursorPosition) +
        text +
        this.model.gs.substring(this.cursorPosition)
      this.cursorPosition = this.cursorPosition + text.length
    },
    clearGs() {
      this.model.gs = ''
    },
  }
}
</script>